<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>
<div class="row" id="roleList">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="row">
			<div class="col-xs-12">
				<div class="table-header">角色列表</div>

				<!-- div.table-responsive -->

				<!-- div.dataTables_borderWrap -->
				<div>
					<table id="dataRoleList"
						class="table table-striped table-bordered table-hover" style="table-layout:fixed">
						<thead>
							<tr>
								<th class="text-center">角色编号</th>
								<th class="text-center">角色名称</th>
								<th class="text-center">角色等级</th>
								<th class="text-center">角色描述</th>
								<!-- <th class="text-center">修改人</th>
								<th class="text-center">修改时间</th> -->
								<th class="text-center">角色状态</th>
								<th class="text-center">操作</th>
							</tr>
						</thead>


						<tbody>
							<c:forEach var="role" items="${roleList}">
							<tr>
								<td>${role.roleId}</td>
								<td>${role.roleName}</td>
								<td><hw:dictName dictType='D00030' dictCode='${role.roleLevel}'/></td>
								<td>${role.roleDesc}</td>
								<%-- <td><hw:userName userId='${role.updateBy}'/></td>
								<td>${role.updateDate}</td> --%>
								<td><hw:dictName dictType='D00023' dictCode='${role.roleStatus}' /></td>
								<td>
									<div class="hidden-sm hidden-xs action-buttons">
											<a class="blue" href="javascript:void(0)" onclick="showRoleList('${role.roleId}')" data-toggle="tooltip" title="查询角色">
												<i class="ace-icon fa fa-search-plus bigger-130"></i>
											</a>
											<a class="green" href="javascript:void(0)" onclick="menuModify('${role.roleId}')" title="配置角色菜单">
												<i class="ace-icon fa fa-pencil bigger-130"></i>
											</a>
											<a class="red" href="javascript:void(0)" onclick="removeRole('${role.roleId}')"  data-toggle="tooltip" title="删除">
												<i class="ace-icon fa fa-trash-o bigger-130"></i>
											</a>
										</div>
								</td>
							</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="hr hr-18 dotted hr-double"></div>

		<!-- PAGE CONTENT ENDS -->
	</div>
	<!-- /.col -->
</div>
<!-- /.row -->
<div id="roleDetailIframe"></div>
<div id="roleMenus"></div>

<!-- page specific plugin scripts -->
<script type="text/javascript">

	var scripts = [null, null];
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
		var dataTables = $("#dataRoleList").dataTable({
							"bAutoWidth" : false,
							"destroy": true,
							"bDestroy":true,
							"oLanguage" : oLanguage,
							"aoColumnDefs": [ { "bSortable": false, "aTargets": [1,3,5] }] , 
							"fnInitComplete" : function(param) {
								$("#dataRoleList_filter")
										.append(
												"<button class=\"btn btn-sm btn-purple btn-right\" type=\"button\" id=\"insert\">"
														+ "<i class=\"ace-icon fa fa-plus-square bigger-110\"></i>"
														+ "新增" + "</button>");
							},
							"fnDrawCallback" : function(param) {			
					        	$('#dataRoleList tbody td').each(function(index){
								    $this = $(this);
								    $this.attr("class","td-overflow");
								    $this.attr("style","width:150px;");
								    var titleVal = $this.text();
								    if (titleVal != '') {
								      $this.attr('title', titleVal);
								    }
								});
								
							}  
		});

		$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
			_title : function(title) {
				var $title = this.options.title || '&nbsp;'
				if (("title_html" in this.options)
						&& this.options.title_html == true)
					title.html($title);
				else
					title.text($title);
			}
		}));

		//角色详细信息
		$('#roleDetailIframe').dialog(
						{
							hide : false,
							autoOpen : false,
							width : 650,
							height : 550,
							modal : true,
							//bgiframe:true,
							title : "<div class='widget-header'><h4 class='smaller'><i class='ace-icon fa fa-cog green'></i>&nbsp; 角色信息</h4></div>",
							title_html : true,
							open:function (event) {
								var roleBtnFlag = $(this).data("roleBtnFlag");
								if(roleBtnFlag =="add"){
									$("#btnRModify").hide();
									$("#btnRSave").show();
									$("#btnRDelete").hide();
									$("#btnRCancle").hide();
									$("#btnRClose").show();	
									$("#btnRMenuModify").hide();
									$("#role_id").hide();
								}else if(roleBtnFlag =="show"){
									$("#btnRModify").show();
									$("#btnRSave").hide();
									$("#btnRDelete").hide();	
									$("#btnRCancle").hide();
									$("#btnRClose").show();
									$("#btnRMenuModify").show();
								}
							},
							buttons : [
									{
										id : "btnRModify",
										html : "<i class='ace-icon fa fa-pencil-square-o bigger-110'></i>&nbsp; 修改",
										"class" : "btn btn-primary btn-minier",
										click : function() {
											modify();
										}
									},
									{
										id : "btnRSave",
										html : "<i class='ace-icon fa fa-floppy-o bigger-110'></i>&nbsp; 保存",
										"class" : "btn btn-success btn-minier",
										click : function() {
											save();
										}
									},
									{
										id : "btnRDelete",
										html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 删除",
										"class" : "btn btn-danger btn-minier",
										click : function() {
											removeRole();
										}
									},
									{
										id : "btnRCancle",
										html : "<i class='ace-icon fa fa-undo bigger-110'></i>&nbsp; 取消",
										"class" : "btn btn-warning btn-minier",
										click : function() {
											cancle();
										}
									},
									{
										id : "btnRClose",
										html : "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 关闭",
										"class" : "btn btn-minier",
										click : function() {
											$(this).dialog("close");
										}
									} ]
						});
		
		
		//角色菜单信息列表
		$('#roleMenus').dialog({
			hide:false,
			autoOpen:false,
			width: 650,
			height:550,
			modal:true,
			//bgiframe:true,
			title: "<div class='widget-header'><h4 class='smaller'><i class='ace-icon fa fa-cog green'></i>&nbsp; 角色菜单</h4></div>",
			title_html: true,
			buttons: [
						{
							id: "btnSur",
							html: "<i class='ace-icon fa fa-floppy-o bigger-110'></i>&nbsp; 确认",
							"class" : "btn btn-success btn-minier",
							click: function() {
								saveRoleMenu();
								$("#roleList").load("${ctx}/role/list");$("#roleList").load("${ctx}/role/list?temp="+new Date().getTime());							}
						},{
							id: "btnReset",
							html: "<i class='ace-icon fa fa-refresh bigger-110'></i>&nbsp; 重置",
							"class" : "btn btn-inverse btn-minier",
							click: function() {
								resetMenu();
							}
						},
						
						{
							id: "btnRClose",
							html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 关闭",
							"class" : "btn btn-minier",
							click: function() {
								$(this).dialog("close");
								//$("#roleList").load("${ctx}/role/list?temp="+new Date().getTime());							
							}
						}				
					]	
				});

		var active_class = 'success';
		$('#dataRoleList').on('click', 'tbody tr', function() {
			var $row = $(this).closest('tr');
			if ($row.hasClass(active_class) == false) {
				dataTables.$('tr.' + active_class).removeClass(active_class);
				$row.addClass(active_class);
			}
		});
		$('#dataRoleList').on('dblclick', 'tbody tr' , function(){
			var aData = dataTables.fnGetData(this); 
			if (aData == null) {
				return;
			} 
			showRoleList(aData[0]);
		});	

		$("#insert").click(function(){
					$("#roleDetailIframe").hide();
					$("#roleDetailIframe").load("${ctx}/role/toInsert?"+new Date().getTime(), function(){
						$("#roleDetailIframe").show();
						$("#roleDetailIframe").data("roleBtnFlag","add").dialog("open");
					});
					
				});
	});
	
	function showRoleList(roleId) {
	    $("#roleDetailIframe").hide();
	   	$("#roleDetailIframe").load("${ctx}/role/getRoleDetailInfo/"+roleId+"?"+new Date().getTime(),function(){
	   		$("#roleDetailIframe").show();
		   	$("#roleDetailIframe").data("roleBtnFlag","show").dialog("open");
	   	});
	   
	}
	
	
	
	function removeRole(roleId){
		removeItem(roleId,function(){
			$("#roleList").load("${ctx}/role/list?temp="+new Date().getTime());
		});
	}


	function removeItem(roleId,callback){
		
			$.post("${ctx}/role/checkStatus",{"roleId":roleId},function(result){
				if(result[0] == "ok"){
					if(confirm("确定删除该项吗?")){
						$.post("${ctx}/role/delete",{"roleId":roleId},function(result){
							if(result[0] == "ok"){
								alert("删除成功！");
								$("#roleDetailIframe").dialog("close");
								callback();
							}else{
								alert(result[1]);
								disabledAll("roleDetailForm");
							}
						})
					}
				}else{
					alert(result[1]);
					disabledAll("roleDetailForm");
				}
			})
		}
	
	//修改角色的菜单选项
	function menuModify(roleId){
		$("#roleMenus").load("${ctx}/role/getRoleMenuDetailInfo?roleId="+roleId,function(){
			$('#roleMenus').show();
			$('#roleMenus').dialog('open'); 
		});
	   	$("#roleDetailIframe").dialog("close");
	}
	
</script>
